<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>015-伪元素选择器</title>
		<style>
			/* 什么是伪元素？ —— 很像元素，但不是元素（element），是元素中的一些位置 */

			/* 选中第一个字符 */
			div::first-letter {
				color: red;
				font-size: 40px;
			}

			/* 选中浏览器中第一行 */
			div::first-line {
				background-color: yellow;
			}

			/* 选中被鼠标选择的文字 */
			div::selection {
				background-color: red;
				color: white;
			}

			/* 选中的是 input 中的提示文字placeholder */
			input::placeholder {
				color: skyblue;
			}

			/* ::before 表示 p 元素内部内容最前的位置，创建一个子元素 */
			p::before {
				content: '$';
				color: gold;
			}

			/* ::before 表示 p 元素内部内容最后的位置，创建一个子元素 */
			p::after {
				content: '.00';
			}
		</style>
	</head>
	<body>
		<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, iusto.</div>
		<br />
		<input type="text" placeholder="请输入您的用户名" />
		<p>199</p>
		<p>299</p>
		<p>399</p>
	</body>
</html>
